<template>
  <v-layout type="main">
    <div class="clearfix">
      <div class="search-box">
        <el-input prefix-icon="el-icon-search" v-model="Pagedata.name" class="search" placeholder="请输入内容"
          @input="getData" />
        <a href="javascript:;" class="add el-icon-plus" @click="$router.push({ path: '/task/detail' })">新增</a>
      </div>
    </div>

    <div class="task-box">
      <drawer-box class="infinite-list" @unfold="unfoldChange">
        <template v-if="!unfold">
          <div :class="['infinite-item', { 'is-active': item.id === detailData.id }]" v-for="item in tableData"
            :key="item.id" @click="handleChange(item)">
            <!-- <div class="title" @click="$router.push({ path: '/task/code', query: { id: item.id } })> -->
            <div class="title">
              {{ item.name }}
            </div>
            <div class="item">
              <el-tag effect="dark" size="mini">{{ item.create_user && item.create_user.nick_name }}</el-tag>
              <el-tag type="info" effect="dark" size="mini">{{ item.create_time }}</el-tag>
            </div>
            <div class="item desc">{{ item.desc }} </div>
          </div>
        </template>
        <template v-else>
          <el-table :data="tableData" stripe style="width: 100%" class="drawer-box-table">
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="create_user.nick_name" label="创建人"></el-table-column>
            <el-table-column label="描述">
              <template slot-scope="scope">
                {{ scope.row.desc }}
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间"></el-table-column>
            <el-table-column prop="update_time" label="更新时间"></el-table-column>
          </el-table>
        </template>
      </drawer-box>

      <div class="task-container">
        <el-tabs v-model="nowRouter" @tab-click="skip" v-show="!$route.meta.hideDetails">
          <el-tab-pane :label="e.meta.title" :name="e.name" v-for="(e, i) in thisRouter" :key="i" />
        </el-tabs>

        <div :class="['layout-content', { 'layout-content-nodetail': $route.meta.hideDetails }]">
          <router-view class="content-detail" :detailData="detailData" :version.sync='version' />
        </div>
      </div>
    </div>
  </v-layout>
</template>

<script>
import drawerBox from "@/components/module/drawer-box.vue"
import { getTaskVersionDetail, addTaskVersion, getTasks, delTask, getTaskDetail, delTaskVersion, stopTaskVersion } from "@/api/task"
export default {
  data() {
    return {
      showThisActive: 1,
      tableData: [],
      nowRouter: this.$route.name,
      thisRouter: [],
      activeNames: ['1'],
      show: true,
      Pagedata: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      version: {},
      detailData: {},
      unfold: false
    };
  },
  mounted() {
    // let temp = this.$router.options.routes.filter(
    //   e => e.name == 'task' && e.children
    // )
    // this.thisRouter = temp[0].children.filter(e => !e.meta.hideDetails)

    this.getData()
    // this.$router.push("/task/code")
    // this.nowRouter = this.$route.name
  },
  methods: {
    skip() {
      let path = `/task/${this.thisRouter.filter(e => e.name == this.nowRouter)[0].path}`
      if (path == this.$route.path) return
      this.$router.push({
        path,
        query: {
          id: this.$route.query.id
        }
      })
    },
    async getData() {
      let res = await getTasks({ ...this.Pagedata })
      this.tableData = res.data.list
      this.tableData.forEach(function (e) { e.showChild = false })
      console.log("table", this.tableData)
      this.Pagedata.total = res.data.total
      this.handleChange(this.tableData[0])
      // this.$router.push("/task/code")
    },
    async handleChange(data) {
      // console.log(data);
      let resTask = await getTaskDetail({ id: data.id })
      this.detailData = resTask.data;

      this.$router.push({
        path: '/task/code',
        query: { id: data.id }
      })
    },
    unfoldChange(val) {
      this.unfold = val;
    },
    showChild(e) {
      e.showChild = !e.showChild
      this.$forceUpdate();
    },
    async delTask({ id }) {
      // let res = await this.$isDel();
      // if (res) {
      await delTask({ id })
      this.getData()
      // }
    },
    async stop(row) {
      let res = await stopTaskVersion({ id: row.id })
      if (res) {
        this.getData()
      }
    },
    async del(row) {
      // let res = await this.$isDel();
      // if (res) {
      await delTaskVersion({ id: row.id })
      this.getData()
      // }
    },
    async copy(row) {
      let resTask = await getTaskDetail({ id: row.task_id })
      let task = resTask.data
      let resVersion = await getTaskVersionDetail({ id: row.id })
      let versionData = resVersion.data
      versionData.version = "v" + (task.version_index + 1)
      versionData.copy_version = row.id
      let ret = await addTaskVersion(versionData)
      let newVersionData = ret.data
      console.log(newVersionData);

      // let query = {
      //   id: task.id,
      //   source_version_id: newVersionData.id
      // }
      // this.$router.push({
      //   path: '/task/code',
      //   query

      // })
    },
    handleCurrentChange(val) {
      this.Pagedata.pageNum = val
      this.getData()
    },
  },
  components: { drawerBox }
}
</script>
<style lang="less" scoped>
.task-box {
  display: flex;

  .task-container {
    width: 100%;
    margin-left: 220px;
  }
}

.item-link {
  font-size: 14px;
  width: 450px;
  font-weight: 900;
}

.item {
  font-size: 14px;
  width: 250px
}

.has-vers-lis {
  margin-top: 4px;
  width: 100%;

  li {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background: #FFF;
  }
}
</style>